<template>
  <div class="seller-div__base" ref="sellercontainer" v-if="sellerData">
    <div class="seller-div__content">
      <div class="seller-div__info">
        <div class="info-div__title">
          <div class="title-div__basis">
            <h2 class="title-h2__name">{{ sellerData.name }}</h2>
            <star-comp :score="sellerData.foodScore" :size="'tiny'"></star-comp>
            <span class="title-span__total"
              >({{ sellerData.ratingCount }})</span
            >
            <span class="title-span__amounts"
              >月售{{ sellerData.sellCount }}</span
            >
          </div>
          <div class="title-div__record" @click="recordSeller">
            <i class="icon-favorite" :class="{ 'active-color': isRecord }"></i>
            <p class="record-p__text">{{ isRecord ? "已收藏" : "收藏" }}</p>
          </div>
        </div>
        <ul class="info-ul__analysis">
          <li class="analysis-li__section">
            <div class="analysis-div__text">起送价</div>
            <div class="analysis-div__number">
              {{ sellerData.minPrice
              }}<span class="analysis-div__unit">元</span>
            </div>
          </li>
          <li class="analysis-li__section">
            <div class="analysis-div__text">商家配送</div>
            <div class="analysis-div__number">
              {{ sellerData.deliveryPrice
              }}<span class="analysis-div__unit">元</span>
            </div>
          </li>
          <li class="analysis-li__section">
            <div class="analysis-div__text">平均配送时间</div>
            <div class="analysis-div__number">
              {{ sellerData.deliveryTime
              }}<span class="analysis-div__unit">分</span>
            </div>
          </li>
        </ul>
      </div>
      <gap-comp></gap-comp>
      <div class="seller-div__activity">
        <h2 class="activity-h2__title">公告与活动</h2>
        <p class="activity-p__content">{{ sellerData.bulletin }}</p>
        <ul class="activity-ul__supports">
          <li
            class="activity-li__item"
            v-for="sup in sellerData.supports"
            :key="sup.description"
          >
            <icon-comp :iconType="sup.type" class="activity-icon"></icon-comp
            ><span class="activity-span__text">{{ sup.description }}</span>
          </li>
        </ul>
      </div>
      <gap-comp></gap-comp>
      <div class="seller-div__gallery">
        <h2 class="gallery-h2__title">商家实景</h2>
        <div class="gallery-div__list" ref="gallerycontainer">
          <div class="gallery-div__content" :style="galleryWidth">
            <img
              class="gallery-img__base"
              v-for="picUrl in sellerData.pics"
              :key="picUrl"
              :src="picUrl"
            />
          </div>
        </div>
      </div>
      <gap-comp></gap-comp>
      <div class="seller-div__more">
        <h2 class="more-h2__title">商家信息</h2>
        <ul class="more-ul__list">
          <li
            class="more-li__info"
            v-for="info in sellerData.infos"
            :key="info"
          >
            {{ info }}
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>
<script lang="ts">
import {
  computed,
  defineComponent,
  Ref,
  ref,
  ComputedRef,
  onMounted,
} from "@vue/composition-api";
import { storageGetData } from "../../common/util/storage";
import {
  setRecordSellers,
  readRecordSellers,
  removeRecordSellers,
} from "../../common/util/users";
import GapComp from "../gap-comp/gap-comp.vue";
import StarComp from "../star-comp/star-comp.vue";
import IconComp from "../icon-comp/icon-comp.vue";
import betterScrollInit from "../../composables/betterScroll-init";

interface WidthOfStyle {
  width: string;
}

export default defineComponent({
  name: "ContentSeller",
  // 组件注册
  components: {
    GapComp,
    StarComp,
    IconComp,
  },
  setup() {
    // 从数据仓库中取得数据
    const sellerData = storageGetData("seller");
    const galleryPics: Ref<string[] | undefined> = ref(sellerData?.pics); // 画廊图片素材库
    const PIC_WIDTH = 120; // 单张图片宽
    const PIC_MARGIN = 6; // 单张外边距
    // 画廊宽度计算属性
    const galleryWidth: ComputedRef<WidthOfStyle> = computed(() => {
      const picsLen = galleryPics.value ? galleryPics.value.length : 0;
      const width =
        PIC_WIDTH * picsLen + Math.max(0, PIC_MARGIN * (picsLen - 1));
      return {
        width: width + "px",
      };
    });
    const USER_RECORED_KEY = "userRecordSellers"; // 用户收藏商家的key
    const isRecord: Ref<boolean> = ref(false); // 是否收藏

    // 收藏商铺函数
    const recordSeller = function () {
      isRecord.value = !isRecord.value;
      const args: [typeof USER_RECORED_KEY, string] = [
        USER_RECORED_KEY,
        sellerData ? sellerData.sellerId : "",
      ];
      // 判断是收藏还是移除
      if (isRecord.value) {
        setRecordSellers<typeof USER_RECORED_KEY, string>(...args);
      } else {
        removeRecordSellers<typeof USER_RECORED_KEY, string>(...args);
      }
    };
    const sellercontainer: Ref<HTMLDivElement | null> = ref(null); // betterScroll容器元素
    const gallerycontainer: Ref<HTMLDivElement | null> = ref(null);
    betterScrollInit(sellercontainer, { click: true }); // 初始化BS组件
    betterScrollInit(gallerycontainer, { scrollX: true, scrollY: false }); // 初始化BS组件
    onMounted(() => {
      // 判断是否收藏过
      readRecordSellers<typeof USER_RECORED_KEY, string[]>(
        USER_RECORED_KEY,
        (value) => {
          if (sellerData && value.indexOf(sellerData.sellerId) !== -1) {
            isRecord.value = true;
          }
        }
      );
    });
    return {
      sellerData,
      sellercontainer,
      gallerycontainer,
      galleryWidth,
      isRecord,
      recordSeller,
    };
  },
});
</script>
<style lang="stylus" scoped>
@import '../../common/style/mixin.styl';

$upheight = calc(100vh - 176px); // 上方区域的高度
$strong-textcolor = rgb(7, 17, 27);
$normal-textcolor = rgb(77, 85, 93);
$weak-textcolor = rgb(147, 153, 159);
$sellername-lineheight = 14px;
$record-icon-fontsize = 24px;
$strong-text-fontsize = 14px;
$medium-text-fontsize = 12px;
$weak-text-fontsize = 10px;
$amounts-text-lineheight = 18px;
$line-color = rgba(7, 17, 27, 0.1);
$active-red = rgb(240, 20, 20);
$activity-p-lineheight = 24px;
$activity-li-lineheight = 16px;

.seller-div__base {
  height: $upheight;
  overflow: hidden;
}

.seller-div__content {
  text-align: left;
}

.seller-div__info {
  padding: 18px 0;
  margin: 0 18px;

  .info-div__title {
    display: flex; // flex布局
    justify-content: space-between;
    align-items: center;
    color: $normal-textcolor;
    position: relative;
    bottom-line($line-color);

    .title-div__basis {
      padding-bottom: 18px;
    }

    .title-h2__name {
      color: $strong-textcolor;
      font-size: $strong-text-fontsize;
      line-height: $sellername-lineheight;
      font-weight: bold;
      padding-bottom: 8px;
    }

    >>>.star-div__item {
      margin: 0 8px 0 0;
    }

    .title-span__total {
      font-size: $weak-text-fontsize;
      vertical-align: middle;
      padding-right: 12px;
    }

    .title-span__amounts {
      vertical-align: middle;
      font-size: $weak-text-fontsize;
    }

    .title-div__record {
      text-align: center;
      min-width: 50px;

      .icon-favorite {
        font-size: $record-icon-fontsize;
        color: $weak-textcolor;
      }

      .active-color {
        color: $active-red;
      }

      .record-p__text {
        font-size: $weak-text-fontsize;
      }
    }
  }

  .info-ul__analysis {
    margin-top: 18px;
    display: flex; // flex布局
    justify-content: center;
    align-items: center;
  }

  .analysis-li__section {
    text-align: center;
    padding: 0 24px;
    border-right: 1px solid $line-color;

    &:last-child {
      border-right: none;
    }
  }

  .analysis-div__text {
    color: $weak-textcolor;
    font-size: $weak-text-fontsize;
    padding-bottom: 4px;
  }

  .analysis-div__number {
    color: $strong-textcolor;
    font-size: $record-icon-fontsize;
  }

  .analysis-div__unit {
    font-size: $weak-text-fontsize;
  }
}

.seller-div__activity {
  margin: 0 18px;
  padding-top: 18px;

  .activity-h2__title {
    color: $strong-textcolor;
    font-size: $strong-text-fontsize;
    font-weight: bold;
  }

  .activity-p__content {
    color: $weak-textcolor;
    font-size: $medium-text-fontsize;
    padding: 8px 12px 16px;
    line-height: $activity-p-lineheight;
  }

  .activity-ul__supports {
    font-size: $medium-text-fontsize;
    color: $normal-textcolor;
    line-height: $activity-li-lineheight;
  }

  .activity-li__item {
    padding: 16px 12px;
    position: relative; // 相对定位
    top-line($line-color);
  }

  .activity-icon {
    height: 16px;
    width: 16px;
    vertical-align: middle;
  }

  .activity-span__text {
    vertical-align: middle;
    padding-left: 6px;
  }
}

.seller-div__gallery {
  padding: 18px 0;

  .gallery-h2__title {
    color: $strong-textcolor;
    font-size: $strong-text-fontsize;
    font-weight: bold;
    margin-left: 16px;
  }

  .gallery-div__list {
    width: 100%;
    overflow: hidden;
  }

  .gallery-div__content {
    white-space: nowrap;
    padding: 12px 18px 0;
  }

  .gallery-img__base {
    margin-right: 6px;
    width: 120px;
    height: 90px;

    &:last-child {
      margin-right: 0;
    }
  }
}

.seller-div__more {
  padding-top: 18px;
  margin: 0 18px;

  .more-h2__title {
    color: $strong-textcolor;
    font-size: $strong-text-fontsize;
    font-weight: bold;
    padding-bottom: 12px;
  }

  .more-li__info {
    padding: 16px 12px;
    color: $normal-textcolor;
    line-height: $activity-li-lineheight;
    font-size: $medium-text-fontsize;
    position: relative; // 相对定位
    top-line($line-color);
  }
}
</style>
